<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        html, body {
            margin: 0;
        }

        #particle-canvas {
            width: 100%;
            height: 100vh;
            background: linear-gradient(to bottom, rgb(10, 10, 50) 0%,rgb(60, 10, 60) 100%);
            vertical-align: middle;
        }

        #container{
            width: 100vw;
            height: 100vh;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #login{
            width: 350px;
            height: 200px;
            padding: 20px;
            border: 1px solid #cccccc;
            background-color: rgba(0, 0, 0, 0.3);
            color: #ffffff;
            font-family: gjm;
            border-radius: 5px;
        }
        table{
            border-collapse: collapse;
            width: 100%;
            height: 100%;
        }
        td:first-child{
            text-align: right;
        }
        #loginId,#loginPwd{
            background-color: transparent;
            border: 0px;
            border-bottom: 1px solid #333333;
            padding-left: 2px;
            color: #ffffff;
        }
        #btn{
            padding: 2px 10px;
            background-color: rgba(51, 102, 153, 0.5);
            border: 0;
            color: #ffffff;
            font-family: gjm;
        }
        #btn:hover{
            background-color: rgba(51, 102, 153, 0.7);
        }
        #btn:active{
            background-color: rgba(51, 102, 153, 0.9);
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="login">
            <table>
                <tr>
                    <th colspan="2">KGC学生管理系统</th>
                </tr>
                <tr>
                    <td>登录名：</td>
                    <td><input type="text" id="loginId" placeholder="请输入登录名"></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" id="loginPwd" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td>记住密码：</td>
                    <td><input id="ck" type="checkbox">
                        <span style="display:inline-block;padding-left: 10px;">自动登录：
                        <input id="auto" type="checkbox"></span>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><button id="btn">登录</button></td>
                </tr>
            </table>
        </div>
    </div>
    <canvas id="particle-canvas" width="966" height="867"></canvas>
    <script src="./js/login.js"></script>
    <script src="../js/bing.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- 注意：jquery.cookie.js 必须在jquery.js的后面引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="./layui/layui.js"></script>
    <script>

        //添加Cookie的方法
        //cname是名称，cvalue是值，exdays是过期天数
        function setCookie(cname,cvalue,exdays=0){
            //创建一个日期对象
            var d = new Date();   
            //设置过期时间
            var expires=''
            if(exdays!==0){
                d.setTime(d.getTime()+(exdays*24*60*60*1000));
                expires = "; expires="+d.toGMTString();
            }
            //保存Cookie信息
            document.cookie = cname + "=" + cvalue + expires;
            console.log(cname + "=" + cvalue + expires);
        }
        //获取Cookie的方法
        //cname是名称
        function getCookie(cname){
            let val=''   //定义值
            //a=aa; b=bb; c=cc
            //['a=aa','b=bb','c=cc']
            //[['a','aa'],['b','bb'],['c','cc']]
            document.cookie.split('; ').map(r=>r.split('=')).forEach(r=>{
                if(r[0]===cname) val=r[1]
            })
            return val
        }

        $(function(){
            // console.log($b.getCookie('name'));
            // console.log($b.getCookie('age'));

            //获取cookie
            // console.log($.cookie('name'));
            // console.log($.cookie('age'));

            //从cookie现实信息
            $('#loginId').val($.cookie('loginId'))
            //判断复选框是否需要选中
            if($.cookie('isck')==='true'){
                $('#ck').prop('checked',true)
                $('#loginPwd').val($.cookie('loginPwd'))
            }
            //判断自动登录复选框是否需要选中
            if($.cookie('isLogin')==='true'){
                $('#auto').prop('checked',true)
                location.href = './index.html'
            }
        })

        layui.use(['layer'], function(){
            //引入layer模块
            var layer = layui.layer;
            
            //登录按钮点击事件
            $('#btn').click(function(){
                // $b.setCookie('name','张家辉',-1)
                // $b.setCookie('age','50',-1)

                //添加cookie
                // $.cookie('name', '张家辉', { expires: 7 });
                // $.cookie('age', '50', { expires: 7 });
                //删除cookie
                // $.removeCookie('name')
                // $.removeCookie('age')


                $.get('http://www.bingjs.com:81/Admin/Login',{
                    loginId:$('#loginId').val().trim(),
                    loginPwd:$('#loginPwd').val().trim()
                },({success,message})=>{
                    if(success){
                        //将登录名保存到cookie中
                        $.cookie('loginId',$('#loginId').val().trim(),{expires:7})
                        //判断用户，是否需要记住密码
                        if($('#ck').prop('checked')){
                            //将密码保存到cookie中（注意：在实际开发中，密码需要加密存储）
                            $.cookie('loginPwd',$('#loginPwd').val().trim(),{expires:7})
                            //将复选框的状态保存到cookie中
                            $.cookie('isck',$('#ck').prop('checked'),{expires:7})
                        }else{
                            //清除对应的cookie
                            $.removeCookie('loginPwd')
                            $.removeCookie('isck')
                        }
                        //判断用户，是否需要自动登录
                        if($('#auto').prop('checked')){
                            //将用户登录成功的状态，保存到cookie中，并设置过期时间为7天
                            //表示7天内自动登录
                            $.cookie('isLogin',true,{expires:7})
                        }else{
                            //将用户登录成功的状态，保存到cookie中，没有设置过期时间，
                            //表示cookie中生命周期为当前会话。关闭浏览器后，自动清除。
                            $.cookie('isLogin',true)
                        }

                        location.href = './index.html'
                    }else{
                        //弹出层
                        layer.open({
                            title: '登录消息',
                            content: message,
                            time: 2000
                        });     
                    }
                })
            })

        }); 
    </script>
</body>
</html>